<template>
  <div class="timepicker">
    <div class="timepicker-box">
      <div class="box-section">
        <div class="section-slider">
          <div class="slider-year-month">
            <van-icon name="arrow-left"  @click="getPreMonthDayList" />
            <span class="year">{{this.monthTitle}}</span>
            <van-icon name="arrow"  @click="getNextMonthDayList" />
          </div>
          <div class="slider-week">
            <span class="week-item" :key="key" v-for="(item, key) in $t('weekText')">{{item}}</span>
          </div>
          <div class="slider-day">
            <div :class="['day-item',item.isThisMonth?'':'not-current-month']" :key="key"
                  v-for="(item, key) in days" @click="changeSelItem(item,key)">
              <div
                :class="['day',item.isToDay?'day-item-current':'', selIndex==key?'day-item-sel':'',item.propsAttr.length?'sel':'']">
                {{item.day}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  formatDate,
  returnData,
  getFirstAndLast,
  isToday
} from '@/utils/day.js'

export default {
  name: "timepicker",
  data() {
    return {
      currentDay: '', //当前几号
      currentYear: '', //当前年
      currentMonth: '', // 当前月
      currentWeek: '', // 当前月1号是星期几？ 0表示星期天
      monthTitle: '',
      dataList: [{
        bgcolor: "#67b7f0",
        id: 1180,
        className: "二级建造师考试",
        data: "2022-06-26"
      }], //有任务的日期
      thisMonthDay: [],
      days: [], //所有日期
      firstDay: new Date(),
      weekDay: new Date().getDay(), //获取今天是周几
      selIndex: -1,
    };
  },
  props: {
    //有任务的日期
    //dataList: {
    //	require: false,
    //	type: Array,
    //	default: () => []
    //}
  },
  computed: {},
  created() {
    this.firstDay.setDate(this.firstDay.getDate() - this.weekDay); //获取本周第一天的日期
    this.initData()
  },
  methods: {
    // 选中日期
    changeSelItem(item, index) {
      this.selIndex = index;
      this.$emit('clickCurrentDay', item)
    },
    // 下月
    getNextMonthDayList() {
      this.pickNext(this.currentYear, this.currentMonth);
    },
    // 上月
    getPreMonthDayList() {
      this.pickPre(this.currentYear, this.currentMonth);
    },
    // 上一月 （@param year, @param month）
    pickPre(year, month) {
      console.log("上一月")
      var d = new Date(formatDate(year, month, 1));
      d.setDate(0); //设置为上个月
      this.initData(formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      this.$emit('currentYM', {
        year: this.currentYear,
        month: this.currentMonth
      })
    },
    // 下一个月 （@param year, @param month）
    pickNext(year, month) {
      console.log("下一个月")
      var d = new Date(formatDate(year, month, 1));
      d.setDate(35);
      this.initData(formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      this.$emit('currentYM', {
        year: this.currentYear,
        month: this.currentMonth
      })
    },
    // 初始化月
    initData(cur) {
      var date;
      if (cur) {
        // 切换上一月、下一月
        date = new Date(cur);
      } else {
        var now = new Date(); // 此处取本机时间，应改为服务器时间
        // console.log(now.getFullYear(), now.getMonth() + 1, 1)
        var date = new Date(formatDate(now.getFullYear(), now.getMonth() + 1, 1));
      }

      this.currentDay = new Date().getDate(); // 今日日期 几号
      this.currentYear = date.getFullYear(); // 当前年份
      this.currentMonth = date.getMonth() + 1; // 当前月份
      this.currentWeek = date.getDay(); // 当前月1号是星期几？ 0表示星期天
      // console.log(this.currentYear, this.currentMonth)
      var month = this.currentMonth >= 10 ? this.currentMonth : "0" + this.currentMonth;
      this.monthTitle = this.currentYear + "-" + month;
      // 当前月最后一天是星期几？ 0表示星期天
      var nextWeek = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDay();
      var str = formatDate(this.currentYear, this.currentMonth, 1); // 2021/05/01
      var nextStr = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
      ).toLocaleDateString(); // 2021/05/31
      var daysList = []; // 初始化日期
      // 设置上一个月 需显示 的最后几天  铺满一周
      for (var i = this.currentWeek; i > 0; i--) {
        var d = new Date(str);
        d.setDate(d.getDate() - i);
        var tod = returnData(d); //获取完整日期
        var dayobject = {
          d: tod,
          data: tod,
          day: d.getDate(),
          isThisMonth: d.getMonth() + 1 == this.currentMonth ? true : false,
          isToDay: isToday(tod),
          isSign: this.isVerDate(d),
          propsAttr: this.copyAttr(d, this.dataList),
        }; // 用一个对象包装Date对象  以便为以后预定功能添加属性
        daysList.push(dayobject); // 将日期放入data 中的days数组 供页面渲染使用
      }
      // 显示当前月的天数  第二个循环为 j<= 36- currentWeek，
      // 因为1号是星期六的时候当前月需显示6行，如2020年8月
      var num = 0; //第几个月 每遇到1号加1
      for (var j = 0; j <= 36 - this.currentWeek; j++) {
        var d = new Date(str);
        d.setDate(d.getDate() + j);
        var tod = returnData(d); //获取完整日期
        var dddd = d.getDate();
        var dayobject = {
          d: tod,
          data: tod,
          day: d.getDate(),
          isThisMonth: d.getMonth() + 1 == this.currentMonth ? true : false,
          isToDay: isToday(tod),
          isSign: this.isVerDate(d),
          propsAttr: this.copyAttr(d, this.dataList),
        };
        if (dddd == 1) {
          num++;
        }
        if (num == 2) {
          break;
        }
        daysList.push(dayobject);
      }
      // 设置下一个月 需显示 的最前几天铺满一周
      for (var k = 1; k <= 6 - nextWeek; k++) {
        var d = new Date(nextStr);
        d.setDate(d.getDate() + k);
        var tod = returnData(d); //获取完整日期
        var dayobject = {
          d: tod,
          data: tod,
          day: d.getDate(),
          isThisMonth: d.getMonth() + 1 == this.currentMonth ? true : false,
          isToDay: isToday(tod),
          isSign: this.isVerDate(d),
          propsAttr: this.copyAttr(d, this.dataList),
        }; // 用一个对象包装Date对象  以便为以后预定功能添加属性
        daysList.push(dayobject); // 将日期放入data 中的days数组 供页面渲染使用
      }
      // 设置本月的所有日期
      this.thisMonthDay = daysList.filter((item, index) => {
        if (isToday(item.d)) {
          this.selIndex = index;
        }
        return item.isThisMonth
      })
      this.days = daysList;
      // console.log(daysList)
    },
    // 判断该日期是否有任务
    isVerDate(d) {
      let dda = returnData(d);
      this.signdays = [];
      for (var i in this.sign_Month) {
        this.signdays.push(this.sign_Month[i].data);
      }
      return this.signdays.includes(dda);
    },
    // 复制元素的所有属性
    copyAttr(d, List, type) {
      // 日期   原数组
      var dd = null;
      if (type) {
        dd = d;
      } else {
        dd = returnData(d);
      }
      var ArrayList = [];
      if (List.length > 0) {
        List.forEach(item => {
          if (item.data == dd) {
            // item.tt = getHourAndMin(item.start) + '-' + getHourAndMin(item.end)
            ArrayList.push(item)
          }
        })
        return ArrayList
      } else {
        return []
      }
    },

  }
};
</script>
<style lang="scss" scoped>
.timepicker {
  width: 90vw;
  height: 50vh;
  background: #fff;
  padding: 15px;
  box-sizing: border-box;

  .timepicker-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    background: #fff;

    .box-section {
      position: relative;
      flex: 1;

      .section-slider {
        display: flex;
        flex-direction: column;

        .slider-year-month {
          padding: 6px 10%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          font-size: 21px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #222222;
        }

        .slider-week {
          display: flex;
          font-weight: bold;
          align-items: center;
          color: #333;

          .week-item {
            flex: 1;
            font-size: 16px;
            padding: 7px 0 10px;
            border-bottom: 1px solid #eee;
            text-align: center;
          }
        }

        .slider-day {
          padding: 5px 0;
          display: flex;
          flex-wrap: wrap;

          .day-item {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            width: 14.28%;
            height: 40px;
            text-align: center;
            font-size: 14px;

            .day {
              width: 30px;
              line-height: 30px;
              height: 30px;
              border-radius: 50%;
              position: relative;
            }

            .sel:after {
              position: absolute;
              display: block;
              content: "";
              width: 3px;
              height: 3px;
              margin: auto;
              border-radius: 50%;
              background: #677FD2;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }

          .day-item-current {
            color: #00DEA1;
            background: #EAEAEA;
          }

          .day-item-sel {
            background: #00DEA1;
            color: #fff;
          }


          .not-current-month {
            .day {
              color: #c9c6c6;
            }
          }
        }
      }
    }

    .box-footer {
      flex-basis: 10%;
      display: flex;
      box-shadow: 0px -1px 0px #eee;

      .footer-btn {
        flex: 1;
        text-align: center;

        span {
          font-size: 8px;
        }

        &:not(:last-child) {
          box-shadow: 1px 0px 0px #eee;
        }
      }
    }
  }
}
</style>

